<template>
  <div class="bot4">
    <div class="headerMaintitle">
      <img class="topPic" src="../assets/rightBottom3.png" alt="" />
      <div class="headerText">标题1</div>
    </div>
    <div class="warn">
      <div>
        <span>在线</span>
        <div>{{ appealList.normal }}</div>
      </div>
      <div>
        <span>离线</span>
        <div>{{ appealList.warn }}</div>
      </div>
      <div>
        <span>在线率</span>
        <div>{{ appealList.warn }}</div>
      </div>
    </div>
    <div style="display: flex; justify-content: space-around">
      <div id="botchart1" class="botchart"></div>
      <div id="botchart2" class="botchart"></div>
      <div id="botchart3" class="botchart"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      appealList: {
        normal: 0,
        warn: 0,
        transact: 0,
        end: 0,
      },
    };
  },
  beforeDestroy() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const chart = this.$echarts.init(document.getElementById("botchart1"));
      const chart2 = this.$echarts.init(document.getElementById("botchart2"));
      const chart3 = this.$echarts.init(document.getElementById("botchart3"));
      const option = {
        graphic: [
          {
            type: "text",
            style: {
              text: "地下水",
              textAlign: "center",
              fill: "#ffffff",
              fontSize: 22,
            },
            left: "center",
            top: "50%",
          },
        ],
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#70B4FF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#3D7DFF", // 100% 处的颜色员工疫苗
              },
            ],
            global: false, // 缺省为 false
          },
        ],
        series: [
          {
            type: "gauge",
            radius: "100%",
            center: ["50%", "40%"],
            startAngle: -270,
            endAngle: 90,
            progress: {
              show: true,
              width: 15,
              overlap: false,
              roundCap: true,
              clip: false,
            },
            detail: {
              valueAnimation: true,
              width: "60%",
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, "-10%"],
              fontSize: 36,
              fontWeight: "bolder",
              color: "#3D7DFF",
              formatter: "{value}%",
            },
            min: 0,
            max: 100,
            data: [{ value: 83 }],
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 15,
                color: [[1, "#212652"]],
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
      };
      const option1 = {
        graphic: [
          {
            type: "text",
            style: {
              text: "水库",
              textAlign: "center",
              fill: "#ffffff",
              fontSize: 22,
            },
            left: "center",
            top: "50%",
          },
        ],
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#36DEED", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#19BAD6", // 100% 处的颜色员工疫苗
              },
            ],
            global: false, // 缺省为 false
          },
        ],
        series: [
          {
            type: "gauge",
            radius: "100%",
            center: ["50%", "40%"],
            startAngle: -270,
            endAngle: 90,
            progress: {
              show: true,
              width: 15,
              overlap: false,
              roundCap: true,
              clip: false,
            },
            detail: {
              valueAnimation: true,
              width: "60%",
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, "-10%"],
              fontSize: 36,
              fontWeight: "bolder",
              color: "#00F8FD",
              formatter: "{value}%",
            },
            min: 0,
            max: 100,
            data: [{ value: 3 }],
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 15,
                color: [[1, "#212652"]],
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
      };
      const option2 = {
        graphic: [
          {
            type: "text",
            style: {
              text: "河流",
              textAlign: "center",
              fill: "#ffffff",
              fontSize: 22,
            },
            left: "center",
            top: "50%",
          },
        ],
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#FFE84F", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#FFCC27", // 100% 处的颜色员工疫苗
              },
            ],
            global: false, // 缺省为 false
          },
        ],
        series: [
          {
            type: "gauge",
            radius: "100%",
            center: ["50%", "40%"],
            startAngle: -270,
            endAngle: 90,
            progress: {
              show: true,
              width: 15,
              overlap: false,
              roundCap: true,
              clip: false,
            },
            detail: {
              valueAnimation: true,
              width: "60%",
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, "-10%"],
              fontSize: 36,
              fontWeight: "bolder",
              color: "#FFCC27",
              formatter: "{value}%",
            },
            min: 0,
            max: 100,
            data: [{ value: 17 }],
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 15,
                color: [[1, "#212652"]],
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
      };
      chart.setOption(option);
      chart2.setOption(option1);
      chart3.setOption(option2);
    },
  },
};
</script>

<style lang="less" scoped>
.warn {
  margin: 23px 10px 40px;
  height: 98px;
  display: flex;
  & > div {
    height: 100%;
    margin-right: 12px;
    background-image: url("../assets/leftWarn.png");
    background-size: 100% 100%;
    flex: 1;
    display: flex;
    color: #ffffff;
    align-items: center;
    justify-content: center;
    span {
      font-size: 20px;
      margin-left: 12px;
      margin-right: 38px;
    }
    div {
      font-weight: bold;
      font-size: 28px;
    }
  }
  & > div:last-child {
    margin-left: 12px;
    margin-right: 0;
  }
}
.botchart {
  margin: 0 20px;
  width: 205px;
  height: 255px;
}
.group {
  margin-top: -222px;
  margin-left: 380px;
  height: 189px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .item {
    display: flex;
    align-items: baseline;

    .item-point {
      background: var(--color);
      width: 17px;
      height: 17px;
      border-radius: 50%;
    }

    .item-content {
      margin-left: 12px;
      display: flex;
      align-items: center;
      // flex-direction: column;

      .item-text {
        color: #ffffff;
        font-size: 24px;
        text-align: left;
      }

      .item-value {
        margin-left: 60px;
        background: var(--color);
        -webkit-background-clip: text;
        color: transparent;
        font-size: 28px;
        font-weight: 600;
        text-align: left;
      }
    }
  }
}
</style>
